<#assign title="成果列表", results="layui-this">
<#include "header.ftl">
    <style>
    /*------公共样式开始------*/
    .fa-angle-right:focus {
        -ms-transform: rotate(45deg);
        /* IE 9 */
        -moz-transform: rotate(45deg);
        /* Firefox */
        -webkit-transform: rotate(45deg);
        /* Safari 和 Chrome */
        -o-transform: rotate(45deg);
        /* Opera */
        transform: rotate(45deg);
        -webkit-transition: -webkit-transform 0.2s ease-in;
        /* Safari 和 Chrome */
        -moz-transition: -moz-transform 0.2s ease-in;
        /* Firefox */
        -o-transition: -o-transform 0.2s ease-in;
        /* Opera */
        transition: transform 0.2s ease-in;
    }
    .layui-inline .layui-form-label {
        width: auto;
    }
    .img-box {
        position: relative;
        overflow: hidden;
        margin: 0;
    }
    .img-box:after {
        position:absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width:100%;
        height: 39%;
        background-color: rgba(0, 0, 0, 0.3);
        content: attr(data-text);
        color: #FFF;
        text-align: center;
        padding: 32% 0;
        border-radius: 100%;
        font-style: normal;
        pointer-events: none;
        transition: opacity 0.6s;
        -moz-transition:opacity 0.6s; /* Firefox 4 */
        -webkit-transition:opacity 0.6s; /* Safari and Chrome */
        -o-transition:opacity 0.6s; /* Opera */
    }
    .img-box:hover:after {
        opacity: 1;
    }
    .img-box-before:after {
        padding: 12% 0;
        height: 74%;
    }

    .img-box-info:after {
        padding: 12% 0;
        height: 74%;
    }
    .layui-inline-block {
        display: inline-block !important;
    }
    .result_account {
        text-indent: 2em;
    }

    /* 取消reboot.scss对legend标签的影响 */
    fieldset legend {
        width: auto;
    }

    div.picture_div {
        margin-bottom: 5px;
        margin-right: 5px;
        position: relative;
        display: inline-block;
    }

    .picture_describe {
        color: white;
        cursor: pointer;
        position: absolute;
        top: 80%;
        left: 0;
        text-align: center;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        line-height: 24px;
        height: 20%;        font-style: normal;
    }

    .layui-layer-page .layui-layer-content {
        position: relative;
        overflow: auto!important;
    }
    .layui-transfer-data {
        height: 459px;
    }
    /*------公共样式结束------*/
    /*小屏幕设备*/
    @media (max-width: 767px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }

    /*中大型屏幕设备*/
    @media (min-width: 768px) {
        /*------显示成果页面中部开始------*/
        /*------显示成果页面中部结束------*/
    }

</style>

    <div class="layui-body my-body">
        <div class="layui-card">
            <div class="layui-card-header">成果列表</div>
            <div class="layui-card-body">
                <#-- 搜索框 -->
                <div class="layui-form" lay-filter="result-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">时间范围:</label>
                            <div class="layui-input-block">
                                <input type="text" name="time" placeholder="选择时间范围" id="time" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">成果类型:</label>
                            <div class="layui-input-block">
                                <select name="type" id="type_view"></select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">审核状态:</label>
                            <div class="layui-input-block">
                                <select name="resultStatus">
                                    <option value="">全部</option>
                                    <option value="UNAUDITED">未审核</option>
                                    <option value="PASSED">已通过</option>
                                    <option value="NOTPASS">未通过</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: auto;line-height: 35px">查询的人:</label>
                            <div class="layui-input-block" style="margin-left: 0;line-height: 39px;max-height: 300px;overflow: auto" id="seach">
                                <button type="button" class="layui-btn" id="addPerson">
                                    <i class="layui-icon">&#xe608;</i> 添加
                                </button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="search-result">搜索</button>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="reset-search">重置</button>
                        </div>

                    </div>
                </div>

                <hr class="layui-bg-orange">

                <#-- 数据表格 -->
                <table id="result-table" lay-filter="result-table"></table>
            </div>
        </div>
    </div>

    <#-- 列工具 -->
    <script type="text/html" id="result-bar">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="watch">
            <i class="layui-icon layui-icon-about"></i>查看详情
        </button>
        {{# if (d.resultStatus === 'PASSED') { }}
        <button class="layui-btn layui-btn-xs layui-btn-disabled" disabled lay-event="pass">
            <i class="layui-icon layui-icon-ok"></i>同意
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="notPass">
            <i class="layui-icon layui-icon-close"></i>否决
        </button>
        {{# } else if (d.resultStatus === 'NOTPASS') { }}
        <button class="layui-btn layui-btn-xs" lay-event="pass">
            <i class="layui-icon layui-icon-ok"></i>同意
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" disabled lay-event="notPass">
            <i class="layui-icon layui-icon-close"></i>否决
        </button>
        {{# } else { }}
        <button class="layui-btn layui-btn-xs" lay-event="pass">
            <i class="layui-icon layui-icon-ok"></i>同意
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="notPass">
            <i class="layui-icon layui-icon-close"></i>否决
        </button>
        {{# } }}

        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </script>

    <#-- 表格工具 -->
    <script type="text/html" id="result-toolbar">
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除选中行</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="pass">通过选中行</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="notPass">否决选中行</button>
        <button class="layui-btn layui-btn-sm" id="indexManager">首页显示管理</button>
    </script>


    <script type="text/html" id="type">
        <option value="">全部</option>
        {{# layui.each(d.payload, function(index, item) { }}
        <option value="{{item.id}}">{{ item.name }}</option>
        {{# }) }}
    </script>
    <script type="text/html" id="addUserForm">
        <form class="layui-form" action="" style="background-color: white;padding-top: 10px">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">请选择</label>
                <div class="layui-input-block">
                    {{# layui.each(d.payload, function(index, item) { }}
                    <i class="layui-inline layui-inline-block" onmouseover="this.style.cursor='pointer'" style="position: relative">
                        <input type="hidden" name="userId" value="{{ item.id }}" />
                        <div class="img-box" data-text="{{ item.realName }}">
                            {{# if (item.avatarPath != null) { }}
                            <img class="layui-circle layui-anim" src="{{ item.avatarPath }}"
                                 alt="logo" width="50" onclick="chooseThis(this)">
                            {{# } else { }}
                            <img class="layui-circle layui-anim" src="/images/logo.png"
                                 alt="logo" width="50" onclick="chooseThis(this)">
                            {{# } }}
                        </div>
                    </i>
                    {{# }) }}
                </div>
            </div>
        </form>
    </script>
    <script type="text/html" id="addResult">
        <form class="layui-form" action="#" lay-filter="addResultForm" id="addResultForm" style="padding-top: 10px">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">成果名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required"
                           lay-reqtext="成果名称不能为空！"
                           autocomplete="off" placeholder="请输入名称" class="layui-input"
                           disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">获得时间</label>
                <div class="layui-input-block">
                    <input type="text" name="getTime" class="layui-input" id="getTime" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto"> 成果类型</label>
                <div class="layui-input-block">
                    <select name="typeId" lay-verify="required" disabled>
                        <option value="0">全部</option>
                        {{# layui.each(d.payload, function(index, item) { }}
                        <option value="{{item.id}}">{{ item.name }}</option>
                        {{# }) }}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto;line-height: 35px">参与人员</label>
                <div class="layui-input-block" style="line-height: 39px;max-height: 300px;overflow: auto" id="helpmate">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">成果简介</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入成果简介" disabled name="info" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">成果图片</label>
            </div>
            <div class="layui-form-item" style="padding-left: 2%;">
                <div id="layer-photos-demo">
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="result-add-submit" id="resultAddSubmit" value="确认">
            </div>
        </form>
    </script>
    <script type="text/html" id="indexManageView">
        <div id="test1" style="margin: 10px"></div>
    </script>

    <script>
        layui.extend({
            result: '/js/result'
        }).use(['form', 'result', 'layer', 'laypage', 'laytpl', 'laydate'], function () {
            var form = layui.form
                , laytpl = layui.laytpl
                , $ = layui.$
                , laydate = layui.laydate
                , layer = layui.layer;

            laydate.render({
                elem: '#time'
                , range: true //或 range: '~' 来自定义分割字符
                , max: 0
            })

            $.get('/type/get', function(data) {
                const getTpl = type.innerHTML
                    , view = document.getElementById('type_view');
                laytpl(getTpl).render(data, function(html){
                    view.innerHTML = html;
                });
                form.render('select');
            })

            // 添加人员
            $('#addPerson').click(function () {
                let idInputs = $('.layui-anim-scale').parent().prev().toArray();
                const ids = idInputs.map(t => t.value)
                $.get('/user/others?userIds=' + ids.join(), function(data) {
                    const getTpl = addUserForm.innerHTML;
                    laytpl(getTpl).render(data, function(html){
                        layer.open({
                            type: 1,
                            title: '添加人员',
                            area: '90%',
                            content: html,
                            btn: ['确定', '取消'],
                            yes: function(index, layero){
                                let imgBox = $('.layui-anim-scale').parent();
                                let idInputs = imgBox.prev().toArray();
                                imgBox.addClass("img-box-before")
                                $('#seach').prepend(imgBox.parent())
                                form.render();
                                layer.close(index)
                            },
                            btn2: function(index, layero) {

                            }
                        })
                    });
                })
            });

            /* 点击已经选择的人员取消选择 */
            $(document).on('click', '.img-box-before', function() {
                $(this).parent().remove()
                form.render();
            });
        })

        function chooseThis(that) {
            if (that.style.borderColor === "") {
                that.style.borderColor = "red";
                that.style.borderStyle = "outset";
                that.style.borderWidth = "2px";
                that.classList.add("layui-anim-scale");
                that.classList.remove("layui-anim-scaleSpring");
            } else {
                that.style.borderColor = "";
                that.style.borderStyle = "";
                that.style.borderWidth = "";
                that.classList.add("layui-anim-scaleSpring");
                that.classList.remove("layui-anim-scale");
            }
        }
    </script>
<#include "footer.ftl">